<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/getParameter.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
        }
        #main{
            width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            margin-top: 80px;
            background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) );
            border-radius: 5rem;
        }
        .img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 6px 6px 20px rgb(122 122 122 / 21%);
        }
        #img img{
            margin-top: -28px;
        }
        #left{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: top;
            align-items: center;
        }
        ul{
            list-style: none;
        }
        #header li{
            transition: all 85ms ease-in;
        }
        #header li a{
            display: inline-block;
            text-align: center;
            width: 100px;
            text-decoration: none;
            /* animation:all 80ms linear; */

        }
        #header li:hover{
            /* animation: a 1s ease-in; */
            transform: scale(1.3);
        }
        #header li{
            margin: 5px 0px;
            background: linear-gradient( to left top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) );
            border-radius: 1rem;
            margin: 2rem 0rem;
            padding: 2rem;
            box-shadow: 6px 6px 20px rgb(122 122 122 / 21%);
            justify-content: space-between;
        }
        #right{
            flex: 2;
        }
        #state{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #state div div,span,a{
            margin: 5px;
        }
        #nologin{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #islogin{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #ss{
            padding: 5px;
            border-radius: 2rem;
            border:2px solid rgba(142, 165, 240, 0.8);
        }
        #user{
            padding: 50px 0px;
            width: 100%;
            background: linear-gradient( to left top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) );
            border-radius: 5rem;
            box-shadow: 6px 6px 20px rgb(122 122 122 / 21%);
        }
        #topFive{
            width: 33%;
            margin-left: 300px;
        }

        #right{
            padding: 15px;
        }
        #top{
            display: flex;
            align-items: flex-end;
        }
        #top div:nth-child(1){
            flex: 1;
        }
        #top div:nth-child(2){
            flex: 2;
        }
        #search_input{
            background: linear-gradient( to left top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) );
            border-radius: 5rem;
            outline: none;
            padding: 10px;
            border:2px solid rgba(142, 165, 240, 0.8)
        }
        #dz li{
            display: flex;
        }
        #rd li{
            display: flex;
        }
        #dz li span{
            flex:3 1;
            max-width:60px;
            word-break:keep-all;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        #rd li span{
            flex:3 1;
            max-width:60px;
            word-break:keep-all;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        #content > div{
            margin: 10px;
            padding: 15px;
            background: linear-gradient( to left top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4) );
            border-radius: 2rem;
            box-shadow: 6px 6px 20px rgb(122 122 122 / 21%);
            transition: all 85ms ease-in;
        }
        #content > div >div:nth-child(2) h1,p{
            max-width:600px;
            word-break:keep-all;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        #content > div >div:nth-child(1){
            display: flex;
            justify-content: space-between;
        }
        #content > div >div:nth-child(1) >span{
            background-color: #6cdbeb;
            padding: 10px;
            border-radius:2rem ;
        }
        #content > div >div:nth-child(3) div{
            display: inline-block;
        }
        #pageNum{
            display: flex;
            justify-content: center;
        }
        #content > div:hover{
            /*transform: scale(1.1);*/
            animation: a 85ms ease-in;
            animation-fill-mode: forwards;
        }
        @keyframes a {
            0%{
                z-index: 1;
                transform: scale(1);
            }
            100%{
                z-index: 1;
                transform: scale(1.1);
            }
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left">
            <div id="user">
                <div id="state">
                    <div id="nologin" style="display: none;">
                        <div class="img">
                            <img style="margin-top: -28px"  src="images/kwd.jpg" width="100%"  alt="">
                        </div>
                        <span id="no_login"></span><a href="login.html">登录</a><a href="register.html">注册</a>
                    </div>
                    <div id="islogin">
                        <div class="img">
                            <img src="images/kwd.jpg" width="100%"  alt="">
                        </div>
                        <span id="span_username">欢迎回来，lxh</span>
                        <a href="/user/loginOut">注销</a>
                    </div>
                    <a id="ss">说些什么...</a>
                </div>
            </div>
            <!--分类-->
            <nav>
                <ul id="header">
                </ul>
            </nav>
            <!--轮播图再说-->
        </div>
        <div id="right">
            <div id="top">
                <!--搜索-->
                <div class="search">
                    <input name="" id="search_input" type="text" placeholder="请输入标题名称" class="search_input" autocomplete="off">
                    <a href="javascript:;" id="search-button" class="search-button">搜索</a>
                </div>
                <!--排行榜-->
                <!--选项卡-->
                <div id="topRight">
                    <div id="topFive">

                        <!-- Nav tabs -->
                        <ul id="myTabs" class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">热度排行</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">点赞排行</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane" id="home">
                                <ul id="rd">

                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="profile">
                                <ul id="dz">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <section>
                <div id="content">

                </div>
                <div class="pageNum" style="text-align: center">
                    <ul id="pageNum">
                        <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li class="curPage"><a href="#">1</a></li>

                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    </div>

<script>
    $(function () {
        //查询用户信息
        $.get("user/findOne",{},function (resp) {
            if(resp.succ){
                $("#nologin").hide().siblings("#islogin").show()
                var msg ="欢迎回来，" +resp.data.username;
                $("#span_username").html(msg);
                $("#ss").prop("href", `/release.html?uid=${resp.data.uid}`);
            }else{
                var msg=resp.msg;
                console.log(resp.msg);
                $("#no_login").html(msg);
                $("#nologin").show().siblings("#islogin").hide();
                $("#ss").prop("href",`/login.html`);
            }
        });

        //分类
        $.get("category/findAll",{},function (resp) {

            var lis = '<li class="nav-active"><a href="index.html" onclick="list()">全部</a></li>';

            for (var i = 0; i < resp.data.length; i++) {
                var li = '<li><a href="index.html?cid='+resp.data[i].cid+'">'+resp.data[i].cname+'</a></li>';
``
                lis += li;
            }
            $("#header").html(lis);
        });

        $("#search-button").click(function () {
                //线路名称
                var title = $("#search_input").val();

                var cid = getParameter("cid");
                // 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxx
                location.href="?cid="+cid+"&title="+title;
            }
        );

    })

    $(function () {

        var cid = getParameter("cid");
        //获取rname的参数值
        var title = getParameter("title");
        //判断rname如果不为null或者""
        if(title){
            //url解码
            title = window.decodeURIComponent(title);
        }

        //当页码加载完成后，调用load方法，发送ajax请求加载数据
        load(cid,null,title);
    });

    function load(cid ,currentPage,title){
        //发送ajax请求，请求route/pageQuery,传递cid
        $.get("route/pageQuery",{cid:cid,currentPage:currentPage,title:title},function (resp) {
            //解析pagebean数据，展示到页面上
            var pb=resp.data;
            //1.分页工具条数据展示
            //1.1 展示总页码和总记录数
            $("#totalPage").html(pb.pages);
            $("#totalCount").html(pb.total);

            var lis = "";

            var fristPage = '<li onclick="javascipt:load('+cid+',1,\''+title+'\')"><a href="javascript:void(0)">首页</a></li>';

            //计算上一页的页码
            var beforeNum =  pb.pageNum-1;
            if(beforeNum <= 0){
                beforeNum = 1;
            }

            var beforePage = '<li onclick="javascipt:load('+cid+','+beforeNum+',\''+title+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

            lis += fristPage;
            lis += beforePage;



            var begin; // 开始位置
            var end ; //  结束位置


            //1.要显示10个页码
            if(pb.pages < 10){
                //总页码不够10页

                begin = 1;
                end = pb.pages;
            }else{
                //总页码超过10页

                begin = pb.pageNum - 5 ;
                end = pb.pageNum + 4 ;

                //2.如果前边不够5个，后边补齐10个
                if(begin < 1){
                    begin = 1;
                    end = begin + 9;
                }

                //3.如果后边不足4个，前边补齐10个
                if(end > pb.pages){
                    end = pb.pages;
                    begin = end - 9 ;
                }
            }


            for (var i = begin; i <= end ; i++) {
                var li;
                //判断当前页码是否等于i
                if(pb.pageNum== i){

                    li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+',\''+title+'\')"><a href="javascript:void(0)">'+i+'</a></li>';

                }else{
                    //创建页码的li
                    li = '<li onclick="javascipt:load('+cid+','+i+',\''+title+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                }
                //拼接字符串
                lis += li;
            }

            var lastPage = '<li onclick="javascipt:load('+cid+','+pb.pages+',\''+title+'\')" class="threeword"><a href="javascript:;">末页</a></li>';
            var nextNum =  pb.pageNum+1;
            if(nextNum >= pb.pages){
                nextNum = pb.pages;
            }
            var nextPage = '<li onclick="javascipt:load('+cid+','+nextNum+',\''+title+'\')" class="threeword"><a href="javascript:;">下一页</a></li>';

            lis += nextPage;
            lis += lastPage;


            //将lis内容设置到 ul
            $("#pageNum").html(lis);

            //2.列表数据展示
            var route_lis = "";
            if(pb.list.length==0){
                route_lis="没有找对应的数据...";
            }else {
            for (var i = 0; i < pb.list.length; i++) {
                //获取{rid:1,rname:"xxx"}
                var data = pb.list[i];
                //判断alreadyUp
                var color="";
                if(data.alreadyUp){
                    color="pink";
                }else {
                    color="black"
                }
                var li = `<div>
                         <div><span>用户：${data.name}</span><span>${data.type}</span></div>
                         <div><h1>${data.title}</h1><p>${data.content}</p></div>
                         <div>
                             <div>
                             <div><span class="iconfont icon-ai-eye"></span><span>${data.countLook}</span></div>
                             <div><span style="color: ${color}" onclick='up(${data.tid})' id="up${data.tid}" class="iconfont icon-dianzan"></span><span id="upNum${data.tid}">${data.countUp}</span></div></div>
                            <span>${data.release_time}</span>
                            <a href="content.html?tid\=${data.tid}">查看详细>>></a>
                         </div>
                     </div>`;
                route_lis += li;
            }
            }
            $("#content").html(route_lis);

            //定位到页面顶部
            window.scrollTo(0,0);
        });
    }

    function up(tid){
       $.post("statistics/update",{tid:tid},function (resp){
           if(resp.succ){
               if(resp.data==true){
                   $(`#up${tid}`).css("color","pink");
                   console.log(document.getElementById(`upNum${tid}`).innerHTML);
                   var num= parseInt(document.getElementById(`upNum${tid}`).innerHTML)+1;
                   $(`#upNum${tid}`).html(num);
               }else {
                   $(`#up${tid}`).css("color","black");
                   var num= parseInt(document.getElementById(`upNum${tid}`).innerHTML)-1;
                   $(`#upNum${tid}`).html(num);
               }


           }else {
               location.href="login.html";
           }
       })
    }


        const all=async ()=>{
            return new Promise((resolve, reject)=>{
                $.ajax({
                    url: 'route/findAll',
                    method: 'get',
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (data) {
                        reject(data);
                    }
                });
            })
        }

     $(function (){
        let list=async ()=> {
            let lookOut="<li><span>排名</span><span>标题</span><span>次数</span></li>";
            let upOut="<li><span>排名</span><span>标题</span><span>次数</span></li>";
            const {data = []} = await all();
            const look = JSON.parse(JSON.stringify(data)).sort((x, y) => y.countLook - x.countLook)
            const up = JSON.parse(JSON.stringify(data)).sort((x, y) => y.countUp - x.countUp)
            console.log("Look", look)
            console.log("Up", up)
            for(let i=0;i<5;i++){
                console.log(look[i])
                lookOut+=`<li><span>${i+1}</span><span>${look[i].title}</span><span>${look[i].countLook}</span></li>`;
                console.log(up[i])
                upOut+=`<li><span>${i+1}</span><span>${up[i].title}</span><span>${up[i].countUp}</span></li>`;
            }

            $("#rd").html(lookOut);
            $("#dz").html(upOut);
            }
         list();
     })
</script>
<script>
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
    $('#myTabs a[href="#profile"]').tab('show') // Select tab by name
    $('#myTabs a:first').tab('show') // Select first tab
    $('#myTabs a:last').tab('show') // Select last tab
    $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
</script>
</body>
</html>